"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.PageHeaderSkeleton = exports.MediaQueryKeyEnum = exports.ListToolbarSkeleton = exports.ListSkeletonItem = exports.ListSkeleton = exports.Line = void 0;

var _jsxRuntime = require("react/jsx-runtime");

var _antdV = require("antd-v4");

var _useMediaAntdQuery = _interopRequireDefault(require("use-media-antd-query"));

/** 一条分割线 */
var Line = function Line(_ref) {
  var padding = _ref.padding;
  return (0, _jsxRuntime.jsx)("div", {
    style: {
      padding: padding || '0 24px'
    },
    children: (0, _jsxRuntime.jsx)(_antdV.Divider, {
      style: {
        margin: 0
      }
    })
  });
};

exports.Line = Line;
var MediaQueryKeyEnum = {
  xs: 2,
  sm: 2,
  md: 4,
  lg: 4,
  xl: 6,
  xxl: 6
};
exports.MediaQueryKeyEnum = MediaQueryKeyEnum;

var StatisticSkeleton = function StatisticSkeleton(_ref2) {
  var size = _ref2.size,
      active = _ref2.active;
  var colSize = (0, _useMediaAntdQuery.default)();
  var arraySize = size === undefined ? MediaQueryKeyEnum[colSize] || 6 : size;

  var firstWidth = function firstWidth(index) {
    if (index === 0) {
      return 0;
    }

    if (arraySize > 2) {
      return 42;
    }

    return 16;
  };

  return (0, _jsxRuntime.jsx)(_antdV.Card, {
    bordered: false,
    style: {
      marginBottom: 16
    },
    children: (0, _jsxRuntime.jsx)("div", {
      style: {
        width: '100%',
        justifyContent: 'space-between',
        display: 'flex'
      },
      children: new Array(arraySize).fill(null).map(function (_, index) {
        return (0, _jsxRuntime.jsxs)("div", {
          style: {
            borderLeft: arraySize > 2 && index === 1 ? '1px solid rgba(0,0,0,0.06)' : undefined,
            paddingLeft: firstWidth(index),
            flex: 1,
            marginRight: index === 0 ? 16 : 0
          },
          children: [(0, _jsxRuntime.jsx)(_antdV.Skeleton, {
            active: active,
            paragraph: false,
            title: {
              width: 100,
              style: {
                marginTop: 0
              }
            }
          }), (0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
            active: active,
            style: {
              height: 48
            }
          })]
        }, index);
      })
    })
  });
};
/** 列表子项目骨架屏 */


var ListSkeletonItem = function ListSkeletonItem(_ref3) {
  var active = _ref3.active;
  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
    children: [(0, _jsxRuntime.jsx)(_antdV.Card, {
      bordered: false,
      // eslint-disable-next-line react/no-array-index-key
      style: {
        borderRadius: 0
      },
      bodyStyle: {
        padding: 24
      },
      children: (0, _jsxRuntime.jsxs)("div", {
        style: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between'
        },
        children: [(0, _jsxRuntime.jsx)("div", {
          style: {
            maxWidth: '100%',
            flex: 1
          },
          children: (0, _jsxRuntime.jsx)(_antdV.Skeleton, {
            active: active,
            title: {
              width: 100,
              style: {
                marginTop: 0
              }
            },
            paragraph: {
              rows: 1,
              style: {
                margin: 0
              }
            }
          })
        }), (0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
          active: active,
          size: "small",
          style: {
            width: 165,
            marginTop: 12
          }
        })]
      })
    }), (0, _jsxRuntime.jsx)(Line, {})]
  });
};
/** 列表骨架屏 */


exports.ListSkeletonItem = ListSkeletonItem;

var ListSkeleton = function ListSkeleton(_ref4) {
  var size = _ref4.size,
      _ref4$active = _ref4.active,
      active = _ref4$active === void 0 ? true : _ref4$active,
      actionButton = _ref4.actionButton;
  return (0, _jsxRuntime.jsxs)(_antdV.Card, {
    bordered: false,
    bodyStyle: {
      padding: 0
    },
    children: [new Array(size).fill(null).map(function (_, index) {
      return (// eslint-disable-next-line react/no-array-index-key
        (0, _jsxRuntime.jsx)(ListSkeletonItem, {
          active: !!active
        }, index)
      );
    }), actionButton !== false && (0, _jsxRuntime.jsx)(_antdV.Card, {
      bordered: false,
      style: {
        borderTopRightRadius: 0,
        borderTopLeftRadius: 0
      },
      bodyStyle: {
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center'
      },
      children: (0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
        style: {
          width: 102
        },
        active: active,
        size: "small"
      })
    })]
  });
};
/**
 * 面包屑的 骨架屏
 *
 * @param param0
 */


exports.ListSkeleton = ListSkeleton;

var PageHeaderSkeleton = function PageHeaderSkeleton(_ref5) {
  var active = _ref5.active;
  return (0, _jsxRuntime.jsxs)("div", {
    style: {
      marginBottom: 16
    },
    children: [(0, _jsxRuntime.jsx)(_antdV.Skeleton, {
      paragraph: false,
      title: {
        width: 185
      }
    }), (0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
      active: active,
      size: "small"
    })]
  });
};
/**
 * 列表操作栏的骨架屏
 *
 * @param param0
 */


exports.PageHeaderSkeleton = PageHeaderSkeleton;

var ListToolbarSkeleton = function ListToolbarSkeleton(_ref6) {
  var active = _ref6.active;
  return (0, _jsxRuntime.jsx)(_antdV.Card, {
    bordered: false,
    style: {
      borderBottomRightRadius: 0,
      borderBottomLeftRadius: 0
    },
    bodyStyle: {
      paddingBottom: 8
    },
    children: (0, _jsxRuntime.jsxs)(_antdV.Space, {
      style: {
        width: '100%',
        justifyContent: 'space-between'
      },
      children: [(0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
        active: active,
        style: {
          width: 200
        },
        size: "small"
      }), (0, _jsxRuntime.jsxs)(_antdV.Space, {
        children: [(0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
          active: active,
          size: "small",
          style: {
            width: 120
          }
        }), (0, _jsxRuntime.jsx)(_antdV.Skeleton.Button, {
          active: active,
          size: "small",
          style: {
            width: 80
          }
        })]
      })]
    })
  });
};

exports.ListToolbarSkeleton = ListToolbarSkeleton;

var ListPageSkeleton = function ListPageSkeleton(_ref7) {
  var _ref7$active = _ref7.active,
      active = _ref7$active === void 0 ? true : _ref7$active,
      statistic = _ref7.statistic,
      actionButton = _ref7.actionButton,
      toolbar = _ref7.toolbar,
      pageHeader = _ref7.pageHeader,
      _ref7$list = _ref7.list,
      list = _ref7$list === void 0 ? 5 : _ref7$list;
  return (0, _jsxRuntime.jsxs)("div", {
    style: {
      width: '100%'
    },
    children: [pageHeader !== false && (0, _jsxRuntime.jsx)(PageHeaderSkeleton, {
      active: active
    }), statistic !== false && (0, _jsxRuntime.jsx)(StatisticSkeleton, {
      size: statistic,
      active: active
    }), (toolbar !== false || list !== false) && (0, _jsxRuntime.jsxs)(_antdV.Card, {
      bordered: false,
      bodyStyle: {
        padding: 0
      },
      children: [toolbar !== false && (0, _jsxRuntime.jsx)(ListToolbarSkeleton, {
        active: active
      }), list !== false && (0, _jsxRuntime.jsx)(ListSkeleton, {
        size: list,
        active: active,
        actionButton: actionButton
      })]
    })]
  });
};

var _default = ListPageSkeleton;
exports.default = _default;